<template>
	<view>
		<comTransition v-if="isComTransition" @updateParentData="updateParentData"/>
		<view class="my" v-if="!isComTransition">
			<view @click="onclick" >
				<comHead :title="$t('grzx.grzx')" :isLeft="false" :isRight="false"></comHead>
			</view>
			<view class="contentBox">
				<view class="userBox" @click.stop="comLink('/pages/my/editUser')">
					<view class="l">
						<view class="img">
							<image :src="getImg(userinfo.avatar)" mode="aspectFill"></image>
							<image v-if="userinfo.level>0" :src="getImg(systemLevel[userinfo.level-1] && systemLevel[userinfo.level-1].image)" mode="aspectFill"></image>
						</view>
						<view class="text">
							<text>{{userinfo.nickname}}</text>
							<text>{{userinfo.bio}}</text>
						</view>
					</view>
					<view class="r" @click.stop="comLink('/pages/my/myVip')">
						<image v-if="userinfo.level>0" :src="getImg(systemLevel[userinfo.level-1] && systemLevel[userinfo.level-1].name_image)" mode="heightFix"></image>
						<!-- <text v-if="userinfo.level>0">{{systemLevel[userinfo.level-1].name}}</text> -->
					</view>
				</view>
				
				<view class="moneyBox">
					<view class="l" @click.stop="comLink('/pages/my/rechangeRecord')">
						<image src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix"></image>
						<text>{{$t('grzx.dqsdye')}}：{{parseInt(userinfo.money)}}</text>
					</view>
					<view class="r" @click="showPay">{{$t('index.cz')}}</view>
				</view>
				
				<view class="setBox">
					<view class="item" v-for="(item,index) in listOne" @click="toLink(1,item)">
						<view class="l">
							<image :src="item.icon" mode="widthFix"></image>
							<text>{{item.name}}</text>
						</view>
						<image class="r" src="https://siha.vxmeng.com/static/my/r.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="setBox">
					<view class="item" v-for="(item,index) in listTwo" @click="toLink(2,item.name)">
						<view class="l">
							<image :src="item.icon" mode="widthFix"></image>
							<text>{{item.name}}</text>
						</view>
						<image class="r" src="https://siha.vxmeng.com/static/my/r.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="setBox">
					<view class="item" v-for="(item,index) in listThr" @click="toLink(3,item)">
						<view class="l">
							<image :src="item.icon" mode="widthFix"></image>
							<text>{{item.name}}</text>
						</view>
						<image class="r" src="https://siha.vxmeng.com/static/my/r.png" mode="widthFix"></image>
					</view>
					<!-- #ifdef H5 -->
					
					<view class="item" @click="zxUser">
						<view class="l">
							<image src="https://siha.vxmeng.com/static/my/3.png" mode="widthFix"></image>
							<text>注销登录</text>
						</view>
						<image class="r" src="https://siha.vxmeng.com/static/my/r.png" mode="widthFix"></image>
					</view>
					<!-- #endif -->
				</view>
				<!-- #ifndef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
	
				<view class="setBox">
	<!-- 				<view class="item" @click="comLink('/pages/my/changeUser')">
						<text>{{this.$t('grzx.qhzh')}}</text>
					</view> -->
					<view class="item" @click="loginOut">
						<text>{{this.$t('grzx.tcdl')}}</text>
					</view>
				</view>
				<!-- #endif -->
			</view>
			
			<view class="version">Version {{version || '1.0.0'}}</view>
			
			<comPop @hidePop="popObj.isPop=false" :type="popObj.type" :title="popObj.title" @sendPopFun="sendPopFun"
				:isInput="popObj.isInput" v-if="popObj.isPop"></comPop>
			<comPay v-if="isPay" @hidePay="hidePay"></comPay>
			
			<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
				<button class="kf" open-type="contact">
					<image src="https://siha.vxmeng.com/static/my/kf.png" mode="widthFix"></image>
				</button>
			
				<comLack v-if="isLack" @hide="hideLack" value="10000"></comLack>
			<!-- #endif -->
			
			<comReward v-if="isObtain"></comReward>
			<!-- <tabBar></tabBar> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isObtain: false,
				timer: null,
				isPay:false,
				isLack: false,
				userinfo: {},
				systemLevel:[],
				popObj: {
					title: "",
					isPop: false,
					isInput: false
				},
				listOne: [],
				listTwo: [],
				listThr: [],
				isComTransition: true,
				version: '',
				touchNum: 0,
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			const accountInfo = wx.getAccountInfoSync();
			this.version = accountInfo.miniProgram.version;
			console.log('小程序版本号',accountInfo.miniProgram.version)
			// #endif
			
			const systemInfo = uni.getSystemInfoSync();
			// #ifdef APP
			this.version = systemInfo.appWgtVersion;
			// #endif
			
			// #ifdef H5
			this.version = systemInfo.appVersion;
			console.log(systemInfo.appVersion,'版本号');
			// #endif
		},
		onShow() {
			if(this.$tools.getStore('share_dou')){
				this.$music.play_obtain();
				this.isObtain = true;
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					this.isObtain = false;
					// this.userinfo.money = Number(this.changeAmount) + Number(this.userinfo.money);
				}, 1500);
				this.$tools.setStore('share_dou', false)
			}
			
			this.$music.play_bgm()
			// #ifdef MP-WEIXIN
			uni.$on('click', this.$music.play_click_1())
			// #endif
			
			// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
			this.listOne = [
				{
					name: this.$t('grzx.czjl'),
					link: '/pages/my/rechangeRecord',
					icon:'https://siha.vxmeng.com/static/my/6.png'
				}
				// {
			// 	name: this.$t('grzx.yqm'),
			// 	link: '',
			//  icon:'https://siha.vxmeng.com/static/my/1.png'
			// }, 
			// {
			// 	name: this.$t('grzx.zhyaq'),
			// 	link: '/pages/my/safety',
			// 	icon:'https://siha.vxmeng.com/static/my/2.png'
			// }, 
			// {
			// 	name: this.$t('grzx.sjgl'),
			// 	link: '/pages/my/dataSet',
			// 	icon:'https://siha.vxmeng.com/static/my/3.png'
			// },
			// {
			// 	name: this.$t('grzx.hyqx'),
			// 	link: '/pages/my/friendPermissions',
			// 	icon:'https://siha.vxmeng.com/static/my/4.png'
			// }, 
			// {
			// 	name: this.$t('grzx.wddd'),
			// 	link: '/pages/my/periphery',
			// 	icon:'https://siha.vxmeng.com/static/my/3.png'
			// }, 
			// {
			// 	name: this.$t('grzx.dzgl'),
			// 	link: '/pages/my/addressManage',
			// 	icon:'https://siha.vxmeng.com/static/my/5.png'
			// },
			]
			this.listTwo = [
				{
					name: this.$t('grzx.tysz'),
					link: '/pages/my/addressManage',
					icon:'https://siha.vxmeng.com/static/my/11.png'
				}
			]
			this.listThr = [{
				name: this.$t('grzx.bzyfk'),
				link: '/pages/my/help',
				icon:'https://siha.vxmeng.com/static/my/13.png'
			}]
			// #endif
			// #ifndef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
			
			this.listOne = [{
			// 	name: this.$t('grzx.yqm'),
			// 	link: '',
			//	icon:'https://siha.vxmeng.com/static/my/7.png'
			// }, {
				name: this.$t('grzx.zhyaq'),
				link: '/pages/my/safety',
				icon:'https://siha.vxmeng.com/static/my/2.png'
			}, 
			// {
			// 	name: this.$t('grzx.sjgl'),
			// 	link: '/pages/my/dataSet',
			// 	icon:'https://siha.vxmeng.com/static/my/3.png'
			// }, {
			// 	name: this.$t('grzx.hyqx'),
			// 	link: '/pages/my/friendPermissions',
			// 	icon:'https://siha.vxmeng.com/static/my/4.png'
			// }, {
			// 	name: this.$t('grzx.wddd'),
			// 	link: '/pages/my/periphery',
			// 	icon:'https://siha.vxmeng.com/static/my/10.png'
			// }, {
			// 	name: this.$t('grzx.dzgl'),
			// 	link: '/pages/my/addressManage',
			// 	icon:'https://siha.vxmeng.com/static/my/5.png'
			// },
			]
			this.listTwo = [{
				name: this.$t('grzx.yhxy'),
				link: '',
				icon:'https://siha.vxmeng.com/static/my/7.png'
			}, {
				name: this.$t('grzx.ysxy'),
				link: '',
				icon:'https://siha.vxmeng.com/static/my/7.png'
			}, 
			// {
			// 	name: this.$t('grzx.grxxyqx'),
			// 	link: '',
			// 	icon:'https://siha.vxmeng.com/static/my/8.png'
			// }, {
			// 	name: this.$t('grzx.grxxsjkj'),
			// 	link: '',
			// 	icon:'https://siha.vxmeng.com/static/my/9.png'
			// }, {
			// 	name: this.$t('grzx.xxgxqd'),
			// 	link: '',
			// 	icon:'https://siha.vxmeng.com/static/my/10.png'
			// }, 
			{
				name: this.$t('grzx.tysz'),
				link: '',
				icon:'https://siha.vxmeng.com/static/my/11.png'
			},
			]
			// this.listTwo = [this.$t('grzx.yhxy'), this.$t('grzx.ysxy'), this.$t('grzx.grxxyqx'), this.$t('grzx.grxxsjkj'),this.$t('grzx.xxgxqd'), this.$t('grzx.tysz')],
			this.listThr = [{
				name: this.$t('grzx.jcgx'),
				link: '',
				icon:'https://siha.vxmeng.com/static/my/12.png'
			}, {
				name: this.$t('grzx.bzyfk'),
				link: '/pages/my/help',
				icon:'https://siha.vxmeng.com/static/my/13.png'
			}]
			// #endif
			this.getUserinfo()
			this.getSystemLevel()
			// this.ceshi()
		},
		methods: {
			onclick(){
				this.touchNum ++
				setTimeout(()=>{
					if(this.touchNum >= 3){
						this.comLink('/pages/my/tj')
					}
					this.touchNum = 0
				},500)
			},
			updateParentData(){
				this.isComTransition = false;
			},
			async ceshi() {
				const res = await this.$myRequest({
					url: 'addons/epay/index/ceshi',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
				}
			},
			hideLack(){
				this.isLack = false
			},
			hidePay(e){
				this.isPay=false
				if(e == 1){
					this.isLack = true
				}else{
					this.getUserinfo()
				}
			},
			showPay(){
				this.isPay = true
			},
			async getSystemLevel() {
				const res = await this.$myRequest({
					url: 'api/system/getSystemLevel',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.systemLevel = res.data
				}
			},
			async getUserinfo() {
				const res = await this.$myRequest({
					url: 'api/user/index',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.userinfo = res.data
				}
			},
			sendPopFun(e) {
				// console.log(e)
				if (e.type == 'loginOut') {
					this.$tools.showTx(this.$t('common.czcg'))
					setTimeout(() => {
						this.$tools.toRe('/pages/login/codeLogin')
					}, 1000)
				} else if(e.type == "update"){
					this.$tools.showTx("已是最新版本！")
				}else {
					this.$tools.showTx(this.$t('common.czcg'))
				}
				this.popObj.isPop = false
			},
			loginOut() {
				this.popObj = {
					title: this.$t('grzx.qdtcdl'),
					isPop: true,
					isInput: false,
					type: 'loginOut'
				}
			},
			
			zxUser() {
				this.popObj = {
					title: "确认注销当前账号并且删除与该账号相关联的数据么！",
					isPop: true,
					isInput: false,
					type: 'loginOut'
				}
			},
			toLink(type, item) {
				if (item.link) {
					this.$tools.toLink(item.link)
				}

				if (item.name == this.$t('grzx.yqm')) {
					this.popObj = {
						title: this.$t('grzx.yqm'),
						isPop: true,
						isInput: true,
						type: 'InvitationCode'
					}
				}

				if (item.name == this.$t('grzx.jcgx')) {
					this.popObj = {
						title: this.$t('grzx.qrgxdzxbbm'),
						isPop: true,
						isInput: false,
						type: 'update'
					}
				}
				if (type == 2 && item != this.$t('grzx.tysz')) {
					this.$tools.toLink('/pages/my/text?tit=' + item)
				}

				if (type == 2 && item == this.$t('grzx.tysz')) {
					this.$tools.toLink('/pages/my/generalSet')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.my {
		height: 100vh;
		display: flex;
		flex-direction: column;
		// align-items: center;
		width: 100%;
		position: relative;

		.contentBox {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 750rpx;
			padding-bottom: 150rpx;
			// margin-left: 30rpx;
			height: calc(100vh - 250rpx);

			.userBox {
				width: calc(100% - 60rpx);
				display: flex;
				align-items: center;
				justify-content: space-between;

				.l {
					display: flex;
					align-items: center;

					.img {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 132rpx;
						height: 132rpx;

						image {
							width: 90rpx;
							height: 90rpx;
							&:nth-child(1){
								border-radius: 50%;
							}
							&:nth-child(2) {
								width: 154rpx;
								height: 154rpx;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}

					.text {
						display: flex;
						flex-direction: column;
						font-size: 40rpx;
						color: #ffffff;
						margin-left: 20rpx;
						width: 400rpx;

						text {
							&:nth-child(1) {
								font-size: 30rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								overflow: hidden;
								-webkit-line-clamp: 1;
								text-overflow: ellipsis;
							}

							&:nth-child(2) {
								font-size: 28rpx;
								color: #D8D8D8;
								margin-top: 10rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								overflow: hidden;
								-webkit-line-clamp: 2;
								text-overflow: ellipsis;
							}
						}
					}
				}

				.r {
					color: #fff;
					image {
						height: 70rpx;
					}
				}
			}
			
			.moneyBox{
				height: 100rpx;
				width: 100%;
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #ffffff;
				.l{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					image{
						width: 52rpx;
						margin-right: 10rpx;
					}
				}
				.r{
					height: 48rpx;
					border-radius: 24rpx;
					padding: 0 24rpx;
					font-size: 24rpx;
					line-height: 48rpx;
					background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
				}
			}

			.setBox {
				width: 750rpx;
				// height: 544rpx;
				margin-top: 20rpx;
				background: linear-gradient(128deg, rgba(#222222,0.3) 0%, rgba(30, 36, 44, 0.35) 102%);
				// border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				padding: 0 20rpx;
				box-sizing: border-box;

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 20rpx 0;
					border-bottom: 2rpx solid rgba(#292929,0.3);

					.l {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						color: #D8D8D8;
						width: 90%;

						image {
							width: 40rpx;
							margin-right: 20rpx;
						}

						text {
							display: inline-flex;
							width: 70%;
						}
					}

					.r {
						width: 48rpx;
					}

					>text {
						font-size: 32rpx;
						color: #D8D8D8;
						display: inline-flex;
						width: 100%;
						align-items: center;
						justify-content: center;
						padding: 10rpx 0;
					}
				}
			}
		}
		.version{
			position: absolute;
			bottom: 0rpx;
			padding: 20rpx;
			color: #BBB;
			width: 100%;
			font-size: 32rpx;
			height: 70rpx;
			text-align: center;
			background: linear-gradient(128deg, rgba(34, 34, 34, 0.3) 0%, rgba(30, 36, 44, 0.35) 102%);
		}
		.kf{
			position: fixed;
			right: 0;
			bottom: 300rpx;
			width: 120rpx;
			height: 90rpx;
			box-sizing: border-box;
			background: rgba(71, 71, 71, 0.3);
			border: 2rpx solid #ffffff;
			border-radius: 45rpx 0 0 45rpx;
			border-right: none;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 60rpx;
			}
		}
		
		::v-deep .share{
			display: none !important;
		}
	}
</style>